<script setup lang="ts"></script>
<template>
<div class="step">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="公司类型">
            <a-radio-group v-model:value="validateInfos.companyType" size="large">
                <a-radio :value="item.value" v-for="item in listCompanyType" :key="item.value">{{item.label}}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label="注册资本">
            <a-row>
                <a-col :span="12">
                    <a-input v-model:value="validateInfos.price" size="large"></a-input>
                </a-col>
                <a-col :span="6">
                    <p style="padding-left:20px">万元</p>
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item label="人员信息">
            <p class="flex">股东 <span class="flex"><img src="@/assets/add.svg" alt="" class="w-6">添加股东</span></p>
            <div class="cardAdd">
                <p class="flex-middle" @click="addInfo(1)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">添加信息</p>
            </div>
            <a-row>
                <a-Col :span='8'>
                    <p>法定代表人</p>
                    <div class="cardAdd">
                        <p class="flex-middle" @click="addInfo(2)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">添加信息</p>
                    </div>
                </a-Col>
                <a-Col :span='8'>
                    <p>监事</p>
                    <div class="cardAdd">
                        <p class="flex-middle" @click="addInfo(3)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">添加信息</p>
                    </div>
                </a-Col>
                <a-Col :span='8'>
                    <p>财务负责人（委托企小满代理记账无需填写）</p>
                    <div class="cardAdd">
                        <p class="flex-middle" @click="addInfo(4)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">添加信息</p>
                    </div>
                </a-Col>
                <a-Col :span='8'>
                    <p>工商联络员</p>
                    <div class="cardAdd">
                        <p class="flex-middle" @click="addInfo(5)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">添加信息</p>
                    </div>
                </a-Col>
            </a-row>
        </a-form-item>
        <a-form-item label="公司类型">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入字号，如阿里，腾讯" prefix="上海" size="large"></a-input>
                </a-col>
                <a-col :span="12">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入行业，如电子服务，科技" suffix="有限公司" size="large"></a-input>
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item label="备选字号">
            <a-row :gutter="16">
                <a-col :span="6">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入备选字号1" size="large"></a-input>
                </a-col>
                <a-col :span="6">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入备选字号2" size="large"></a-input>
                </a-col>
                <a-col :span="6">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入备选字号3" size="large"></a-input>
                </a-col>
                <a-col :span="6">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入备选字号4" size="large"></a-input>
                </a-col>
            </a-row>
        </a-form-item>
        <div class="bar"></div>
        <a-form-item label="公司类型">
            <a-radio-group v-model:value="validateInfos.companyType2" size="large">
                <a-radio :value="item.value" v-for="item in listCompanyType2" :key="item.value">{{item.label}}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label="经营范围">
             <div class="addLimit"><span class="flex"><img src="@/assets/add.svg" alt="" class="w-6">添加经营范围</span></div>
             <div class="mt30">
                 <a-textarea v-model:value="validateInfos.price" :auto-size="{ minRows: 5, maxRows: 5 }" placeholder="另外需要添加的经营范围，以工商核准为准" size="large"></a-textarea>
                 <p class="tip">用通俗的语言概括您最主要的经营业务，以便我们判断您填写的经营范围是否妥当。</p>
             </div>
        </a-form-item>
         <a-form-item label="实际经营地">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入实际经营地址" size="large"></a-input>
                </a-col>
                <a-col :span="6">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入联系电话" size="large"></a-input>
                </a-col>
                <a-col :span="6">
                    <a-input v-model:value="validateInfos.price" placeholder="请输入邮政编码" size="large"></a-input>
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item :wrapperCol="wrapperColTip">
            <div class="center">
                <a-checkbox v-model:checked="validateInfos.checked" size="large">
                    <span>提交订单代表您已同意</span>
                    <span class="blue">《在线注册公司代理服务协议》</span>
                </a-checkbox>
            </div>
        </a-form-item>
         
        <div class="center">
            <a-button type="primary" @click.prevent="onSubmit" size="large" style="margin-right:10px">暂时保存</a-button>
            <a-button type="primary" @click.prevent="onSubmit" size="large">确认提交</a-button>
        </div>
    </a-form>
    <a-modal v-model:visible="visible" :title="'添写'+titleList[type]+'信息'" @ok="handleOk" :width="900">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">提交</a-button>
      </template>
      <AddInfo :type="type"/>
    </a-modal>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw ,ref,computed} from 'vue';
import {
    useStore
} from "vuex";
import { Form } from 'ant-design-vue';
// import CountdownButton from '@/components/common/countdown-button.vue'
import AddInfo from './step2-add.vue'

const useForm = Form.useForm;
export default defineComponent({
    components:{
        AddInfo
    },
  setup() {
    const store = useStore();
    const state = store.state;
     // 公司类型
    const listCompanyType=[
        {
            label:'内资有限公司（含一人有限公司）',
            value:'1'
        },
        {
            label:'工作室（个人独资公司）',
            value:'2'
        },
    ]
     // 公司类型
    const listCompanyType2=[
        {
            label:'一般顺序',
            value:'1'
        },
        {
            label:'行政区域在字号后面',
            value:'2'
        },
        {
            label:'行政区域在行业后面',
            value:'3'
        },
    ]
   
    const modelRef = reactive({
        companyType:'',
        companyType2:'',
        price:'',
        checked:ref<boolean>(false)
    });
    const rulesRef = reactive({
    //   code: [
    //     {
    //       required: true,
    //       message: '请输入验证码',
    //     },
    //   ],
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
      onValidate: (...args) => console.log(...args),
    });
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef),'提交');
          store.commit('setRegCompanyStepsCurrent',3)
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    const type=ref<number>(1)
    const loading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const titleList=ref(['','股东','法人代表','监事','财务负责人','工商联络员'])
    const addInfo=(t)=>{
        type.value=t
        console.log(type)
        visible.value = true;
    }
    const handleOk = () => {
      loading.value = true;
      
      setTimeout(() => {
        loading.value = false;
        visible.value = false;
      }, 1000);
    };

    const handleCancel = () => {
      visible.value = false;
    };
    return {
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
      wrapperColTip: { span: 23 },
      listCompanyType,
      listCompanyType2,
      type,
      visible,
      addInfo,
      titleList,
    };
  },
});
</script>

<style lang="less" scoped>
.step {
    padding: 50px 60px;
}

.cardAdd {
    width: 260px;
    height: 160px;
    color: rgba(25, 165, 235, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    font-size: 16px;
    border: rgba(229, 229, 229, 1) solid 1px;
    text-align: center;
    margin: 25px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;

    .img {
        margin-right: 4px;
    }
}

.flex-middle {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.addLimit{
	height: 60px;
	color: rgba(25, 165, 235, 1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 2px;
	font-size: 16px;
	line-height: 150%;
	border: rgba(229, 229, 229, 1) solid 1px;
	display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

</style>
